<template>
  <div class="table-complex">
    <div
      v-for="child in column.children"
      :key="child.prop"
      class="complex-item"
    >
      <el-input
        v-model="childValue[child.prop]"
        :size="size"
        :placeholder="child.placeholder"
        @input="handleInput(child.prop, $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  row: Object,
  column: Object,
  index: Number,
  size: {
    type: String,
    default: 'small'
  }
})

const emit = defineEmits(['update'])

const childValue = computed(() => props.row[props.column.prop] || {})

const handleInput = (prop, value) => {
  const newValue = { ...childValue.value, [prop]: value }
  emit('update', newValue)
}
</script>

<style scoped>
@reference "tailwindcss";

.table-complex {
  @apply space-y-1;
}

.complex-item {
  @apply w-full;
}
</style>